<template>
	<div>
		<!-- <blog-summary mode="pc" /> -->
		<!-- <blog-summary mode="pc-sm" /> -->
		<!-- <blog-summary mode="mobile" /> -->
		<!-- <nation-list /> -->
		<!-- <mobile-common-pop /> -->
		<!-- <blog-hot-blog></blog-hot-blog> -->
		<!-- <blog-hot-selected v-model="isSelected" @update:close="handleClose"></blog-hot-selected> -->
		<!-- <blog-hot-selected mode='mobile' v-model='isSelected'></blog-hot-selected> -->
		<!-- <blog-mobile-tag-selected v-model="isSelected" @update:open="handlerOpen"></blog-mobile-tag-selected> -->
		<!-- <blog-detail-head></blog-detail-head> -->
		<!-- <blog-detail-head mode="mobile"></blog-detail-head> -->
		<!-- <Catalogue :catalogueList="catalogueList" @update:skip="handleSkip" />
		 <blog-hot-blog></blog-hot-blog> -->
		<!-- <blog-mobile-nation-list v-model='isShow'></blog-mobile-nation-list> -->
		<!-- <blog-mobile-hot-tags v-model="isShow" @update:sure="handleSure" @update:close="hanlderClose"></blog-mobile-hot-tags> -->
		<!-- <blog-detail-head mode="mobile"></blog-detail-head> -->
		<!-- <button @click="isShow = true">打开热门标签</button> -->
		<Catalogue
			:catalogueList="catalogueList"
			@update:skip="handleSkip"
			:marginLeft="20"
			:h1Style="{
				fontSize: '28px',
				fontWeight: '400',
				lineHeight: '36px',
				color: 'var(--blog-normal-text-color-black)',
			}"
			:h2Style="{
				fontSize: '24px',
				fontWeight: '400',
				lineHeight: '30px',
				color: '#666666',
			}"
			style="width: 710px"
		/>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	const isSelected = ref(true);
	const handleClose = () => {
		console.log('close');
		isSelected.value = false;
	};
	function handlerOpen() {
		console.log('open');
	}
	const handleSkip = id => {
		console.log(id);
	};
	const isShow = ref(false);
	const handleSure = val => {
		isShow.value = false;
	};
	function hanlderClose() {
		isShow.value = false;
	}
	const catalogueList = ref([
		{
			id: 1,
			title: '1 楽天市場での店名はとても大事！',
			children: [
				{
					id: 11,
					title: '1.1 初期の店名が適当につけられている問題',
					children: [],
				},
				{
					id: 11,
					title: '1.2 初期の店名が適当につけられている問題',
					children: [],
				},
			],
		},
		{
			id: 2,
			title: '2 商品画像の重要性',
			children: [
				{
					id: 21,
					title: '2.1 画像サイズと画質の基準',
					children: [],
				},
			],
		},
		{
			id: 3,
			title: '3 商品説明文の作成術',
			children: [
				{
					id: 31,
					title: '3.1 顧客が知りたい情報を整理する',
					children: [],
				},
			],
		},
		{
			id: 4,
			title: '4 価格設定のコツ',
			children: [
				{
					id: 41,
					title: '4.1 競合調査の方法',
					children: [],
				},
			],
		},
		{
			id: 5,
			title: '5 レビュー対策',
			children: [
				{
					id: 51,
					title: '5.1 初期レビューを集める方法',
					children: [],
				},
			],
		},
	]);
</script>
<style lang="scss" scoped></style>
